<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">   
          <div id="router-view">   
            <h1>我是容器,我可以渲染对应组件</h1>
    </div>   
      <a href="#t1">切换到组件1</a>   
      <a href="#t2">切换到组件2</a>   
    </div>   
    <template id="t1">   
      <h1>这是组件1内容</h1>   
    </template>   
    <template id="t2">   
      <h1>这是组件2内容</h1>   
    </template>   
    <script>   
      // 绑定hashchange事件监听变化   
      window.onhashchange = function() {   
        let hash = location.hash.substring(1);   
        console.log("hash = ", hash);   
        
    // 让#router-view的div内容变成id等于对应hash模板内容   
        document.getElementById('router-view').innerHTML =   
          
    document.getElementById(hash).innerHTML;   
      }   
    </script> 
</body>
</html>